<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="author" content="SkyKiDS" />
		<meta name="keywords" content="스톱워치, 카운트다운, 시계, stopwatch, countdown, clock, time, hour, day, week" />
		<meta name="description" content="스톱워치, 카운트다운, 시계" />
		<title>Decrease Seconds per second.</title>
		<style type="text/css">
		<!--
			img {border:0;}
		// -->
		</style>
		<script type="text/javascript">
		<!-- <![CDATA[
			var countdownId;
			var startCountdownId = false;

			function countdown() {
				var secondsSpan = document.getElementById("seconds");
				var i = parseInt(secondsSpan.innerHTML, 10);

				if (i <= 0) {
					clearInterval(countdownId);
					startCountdownId = false;
				}
				else {
					i = i - 1;
					secondsSpan.innerHTML = i;

					startCountdownId = true;
				}
			}

			var clockId;
			var startClockId = false;

			function runClock() {
				var now = new Date();
				var year = now.getFullYear(); // getYear() is deprecated.
				var month = now.getMonth() + 1;
				var date = now.getDate();
				var hours = now.getHours();
				var minutes = now.getMinutes();
				var seconds = now.getSeconds();
				var milliseconds = now.getMilliseconds();
				var week = new Array("일", "월", "화", "수", "목", "금", "토");
				var day = now.getDay();
				var clock = document.getElementById("clock");

				var whatTimeIsIt = year + "년 " + month + "월 " + date + "일 " + hours + "시 " + minutes + "분 " + seconds + "초 " + milliseconds + " " + week[day] + "요일입니다.";
				clock.innerHTML = "현재 시각은 " + whatTimeIsIt;

				startClockId = true;
			}

			function startTimer(timerId) {
				if (timerId == "countdownId") {
					if (startCountdownId) {
						alert("타이머가 실행 중입니다.");
					}
					else {
						countdownId = setInterval("countdown()", 1000);
						startCountdownId = true;
					}
				}
				else {
					if (startClockId) {
						alert("타이머가 실행 중입니다.");
					}
					else {
						clockId = setInterval("runClock()", 1000);
						startClockId = true;
					}
				}
			}

			function stopTimer(timerId) {
				if (timerId == "countdownId") {
					if (!startCountdownId) {
						alert("타이머가 실행되지 않았습니다.");
					}
					else {
						clearInterval(countdownId);
						startCountdownId = false;
					}
				}
				else {
					if (!startClockId) {
						alert("타이머가 실행되지 않았습니다.");
					}
					else {
						clearInterval(clockId);
						startClockId = false;
					}
				}
			}

			function go() {
				countdownId = setInterval("countdown()", 1000);
				clockId = setInterval("runClock()", 1000);
			}

			var startTime, currentTime, period;
			var isStopwatchStarted = false;
			var stopwatchId;

			function stopwatch(startedTime) {
				currentTime = new Date();
				period = currentTime - startedTime;
				document.getElementById("stopwatch").innerHTML = period / 1000;

				var periodHours = 0;
				var periodMinutes = 0;
				var periodSeconds = 0;
				var periodMilliseconds = 0;
				if (period >= 3600000) {
					periodHours = Math.floor(period / 3600000);
					period = period - (periodHours * 3600000);
					periodMinutes = Math.floor(period / 60000);
					period = period - (periodMinutes * 60000);
					periodSeconds = Math.floor(period / 1000);
					period = period - (periodSeconds * 1000);
					periodMilliseconds = period;
				}
				else if (period >= 60000) {
					periodMinutes = Math.floor(period / 60000);
					period = period - (periodMinutes * 60000);
					periodSeconds = Math.floor(period / 1000);
					period = period - (periodSeconds * 1000);
					periodMilliseconds = period;
				}
				else if (period >= 1000) {
					periodSeconds = Math.floor(period / 1000);
					period = period - (periodSeconds * 1000);
					periodMilliseconds = period;
				}
				else {
					periodMilliseconds = period;
				}
// 조건절 또는 ?를 통해 0을 표현하기
				document.getElementById("stopwatchExtended").innerHTML = periodHours + " : " + periodMinutes + " : " + periodSeconds + " : " + periodMilliseconds;
			}

			function controlStopwatch() {
				if (isStopwatchStarted == false) {
					startTime = new Date();
					// document.getElementById("stopwatchDebug").innerHTML = new Number(startTime); // for debug
					stopwatchId = setInterval("stopwatch(startTime)", 1);
					isStopwatchStarted = true;
					document.getElementById("stopwatchController").value = "   Stop!   ";
				}
				else {
					clearInterval(stopwatchId);
					isStopwatchStarted = false;
					document.getElementById("stopwatchController").value = "   Start!   ";
				}
			}
		// ]]> -->
		</script>
	</head>
	<body onload="runClock(); go();">
		<div>
			<span id="seconds">4</span> 초 후 이동합니다.<br />
			<a href="#" onclick="stopTimer('countdownId'); return false;">멈추기</a> <a href="#" onclick="startTimer('countdownId'); return false;">계속하기</a>
		</div>
		<div>
			<div id="clock">현재 시각 : </div>
			<a href="#" onclick="stopTimer('clockId'); return false;">시계 멈추기</a> <a href="#" onclick="startTimer('clockId'); return false;">시계 돌리기</a>
		</div>
		<div>
			<div id="stopwatch">0</div>
			<div id="stopwatchExtended">00 : 00 : 00 : 00</div>
		<input id="stopwatchController" type="button" value="   Start!   " onclick="controlStopwatch();" />
<!--		<div id="stopwatchDebug"></div> // -->
		</div>
		<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></p>
	</body>
</html>